import "./table.scss";
import classNames from "classnames";
type TableCellProps = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  "children" | "className"
> & {
  children: React.ReactElement | React.ReactElement[] | string | number;
  isShadow?: boolean;
  radiusPostion?:
    | ""
    | "top-right"
    | "top-left"
    | "bottom-right"
    | "bottom-left"
    | "top"
    | "bottom"
    | "left"
    | "right";
  onClick?: () => void;
  align?: "center" | "left" | "right";
};

export const Td = ({
  children,
  isShadow,
  radiusPostion,
  onClick,
  align = "left",
  ...rest
}: TableCellProps): React.ReactElement => {
  const tdClassName = () => {
    return classNames(
      "dashboard_table_cell",
      isShadow && "is_shadow",
      radiusPostion,
      onClick && "is_action"
    );
  };

  const handleClick = () => {
    onClick?.();
  };

  return (
    <>
      <div
        className={tdClassName()}
        onClick={handleClick}
        {...rest}
        style={{ textAlign: align }}
      >
        <span>{children}</span>
      </div>
    </>
  );
};
